<template>
  <view class="uni-container">
    <uni-forms ref="form" :model="formData" validate-trigger="submit" err-show-type="toast">
      <uni-forms-item name="category_id" label="分类" required>
        <uni-data-picker self-field="_id" parent-field="parent_id" v-model="formData.category_id" collection="opendb-mall-categories" field="name as text, _id as value"></uni-data-picker>
      </uni-forms-item>
      <uni-forms-item name="title" label="标题" required>
        <uni-easyinput placeholder="标题" v-model="formData.title" trim="both"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="content" label="菜谱内容" required>
        <!-- <uni-easyinput placeholder="菜谱内容" v-model="formData.content" trim="both"></uni-easyinput> -->
        <!-- 使用富文本编辑器来回显菜谱内容↓ -->
         <view class="editor-box">
          <sp-editor :toolbar-config="{
            excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
            iconSize: '18px'
          }" @init="initEditor" @input="handlerForInputEvent" @upinImage="upinImage" @overMax="overMax" @addLink="addLink"
            @exportHtml="exportHtml"></sp-editor>
        </view>
      </uni-forms-item>
      <uni-forms-item name="avatarfile" label="封面大图" required>
        <uni-file-picker file-mediatype="image" return-type="object" v-model="formData.avatarfile"></uni-file-picker>
      </uni-forms-item>
      <view class="uni-button-group">
        <button type="primary" class="uni-button" @click="submit">提交</button>
      </view>
    </uni-forms>
  </view>
</template>

<script>
  import { validator } from '../../js_sdk/validator/food-list.js';

  const db = uniCloud.database();
  const dbCollectionName = 'food-list';

  function getValidator(fields) {
    let result = {}
    for (let key in validator) {
      if (fields.indexOf(key) > -1) {
        result[key] = validator[key]
      }
    }
    return result
  }

  

  export default {
    data() {
      let formData = {
        "category_id": "",
        "title": "",
        "content": "",
        "avatarfile": null
      }
      return {
        formData,
        formOptions: {},
        rules: {
          ...getValidator(Object.keys(formData))
        },
        editorIns: null, // 富文本编辑器实例
      }
    },
    onLoad(e) {
      if (e.id) {
        const id = e.id
        this.formDataId = id
        this.getDetail(id)
      }
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      
      /**
       * 验证表单并提交
       */
      submit() {
        uni.showLoading({
          mask: true
        })
        this.$refs.form.validate().then((res) => {
          return this.submitForm(res)
        }).catch(() => {
        }).finally(() => {
          uni.hideLoading()
        })
      },

      /**
       * 提交表单
       * @param {Object} value 表单数据对象
       */
      submitForm(value) {
        // 使用 clientDB 提交数据
        // return db.collection(dbCollectionName).doc(this.formDataId).update(value).then((res) => {
        // 改造此处，在完成修改操作时，提交表单数据时，将表单数据中的“status”字段设置为0（表示审核中），而非直接提交，这样做后可以避免出现修改数据后，“审核状态”仍然被显示为“审核未通过”的问题↓
        return db.collection(dbCollectionName).doc(this.formDataId).update({...value,status:0}).then((res) => {
          uni.showToast({
            icon: 'none',
            title: '修改成功'
          })
          this.getOpenerEventChannel().emit('refreshData')
          setTimeout(() => uni.navigateBack(), 500)
        }).catch((err) => {
          uni.showModal({
            content: err.message || '请求服务失败',
            showCancel: false
          })
        })
      },

      /**
       * 获取表单数据
       * @param {Object} id
       */
      getDetail(id) {
        uni.showLoading({
          mask: true
        })
        db.collection(dbCollectionName).doc(id).field("category_id,title,content,avatarfile").get().then((res) => {
          const data = res.result.data[0]
          if (data) {
            this.formData = data
            
          }
        }).catch((err) => {
          uni.showModal({
            content: err.message || '请求服务失败',
            showCancel: false
          })
        }).finally(() => {
          uni.hideLoading()
        })
      },
      // 以下内容是富文本编辑器“sp-editor”提供的一些方法↓
    /**
     * 获取输入内容
     * @param {Object} event “event”是组件触发的事件对象，此处可直接获取到编辑器的内容。这个对象中的“html”和“text”属性的值分别是输入内容的html文本和text文本
     */
    handlerForInputEvent(event) {
      // 可以在此处获取到编辑器中已编辑的内容
      /* console.log(event); // {html: '<p>123</p>', text: '123\n'}
      console.log(event.text);
      console.log(event.html); // 编辑器内容html文本 */
      this.formData.content = event.html
    },
    /**
     * 超出最大内容限制
     * @param {Object} e {html,text} 内容的html文本，和text文本
     */
    overMax(e) {
      // 若设置了最大字数限制，可在此处触发超出限制的回调
      console.log('==== overMax :', e)
    },
    /**
     * 编辑器就绪
     * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
     * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
     * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
     */
    initEditor(editor) {
      this.editorIns = editor // 保存编辑器实例
      // 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
      this.preRender()
    },
    preRender() {
      setTimeout(() => {
        // 异步获取后端数据后，初始化编辑器内容
        this.editorIns.setContents({
          // html: `<div>&nbsp;&nbsp;猫猫<img src="https://img.yzcdn.cn/vant/cat.jpeg"/></div>`
          html: this.formData.content // 在编辑器中回显后端数据
        })
      }, 1000)
    },
    /**
     * 直接运行示例工程插入图片无法正常显示的看这里
     * 因为插件默认采用云端存储图片的方式
     * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
     * @param {Object} tempFiles
     * @param {Object} editorCtx
     */
    upinImage(tempFiles, editorCtx) {
      /**
       * 本地临时插入图片预览
       * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
       * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
       * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
       */
      // #ifdef MP-WEIXIN
      // 注意微信小程序的图片路径是在tempFilePath字段中
      /* editorCtx.insertImage({
        src: tempFiles[0].tempFilePath,
        width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
        success: function () {}
      }) */
      // #endif

      // #ifndef MP-WEIXIN
      /* editorCtx.insertImage({
        src: tempFiles[0].path,
        width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
        success: function () {}
      }) */
      // #endif

      /**
       * 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
       * 正式开发环境中，请将上面 本地临时插入图片预览 注释后，模仿以下写法
       */
      tempFiles.forEach(async (item) => { // 注：此处有循环，说明支持多选图片上传
        uni.showLoading({
          title: '上传中请稍后',
          mask: true
        })
        let upfile = await uniCloud.uploadFile({
          filePath: item.path,
          // 同名会导致报错 policy_does_not_allow_file_overwrite
          // cloudPath可由 想要存储的文件夹/文件名 拼接，若不拼文件夹名则默认存储在cloudstorage文件夹中
          // cloudPath: `cloudstorage/${item.name}`,
          cloudPath: `${dayjs(new Date()).format('YYYYMMDD')}/${Date.now() + item.name}`,
          cloudPathAsRealPath: true
        })
        editorCtx.insertImage({
          src: upfile.fileID,
          width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
          success: function () {
            uni.hideLoading()
          }
        })
      })
    },
    /**
     * 导出 - toolbar需要开启export工具
     * @param {string} e 导出的html内容
     */
    exportHtml(e) {
      uni.navigateTo({
        url: '/pages/out/out',
        success(res) {
          // 传至导出页面解析即可
          res.eventChannel.emit('e-transmit-html', {
            data: e
          })
        }
      })
    },
    /**
     * 添加超链接
     * @param {Object} e { text: '链接描述', href: '链接地址' }
     */
    addLink(e) {
      console.log('==== addLink :', e)
    }
    }
  }
</script>

<style>
  .uni-container {
    padding: 15px;
  }

  .uni-input-border,
  .uni-textarea-border {
    width: 100%;
    font-size: 14px;
    color: #666;
    border: 1px #e5e5e5 solid;
    border-radius: 5px;
    box-sizing: border-box;
  }

  .uni-input-border {
    padding: 0 10px;
    height: 35px;

  }

  .uni-textarea-border {
    padding: 10px;
    height: 80px;
  }

  .uni-button-group {
    margin-top: 50px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
  }

  .uni-button {
    width: 184px;
  }
  .editor-box {
  height: 600rpx;
  }
</style>
